<template>
	<Layout class="p-5 bg-white">
		<Form :label-width="80">
			
			
			<FormItem class="w-50" label="省*">
				<el-select v-model="house.provienceId" @change="searchCity(house.provienceId)" 
				clearable placeholder="请选择省*" size="small"
					style="width: 200px;margin-right: 20px;">
					<el-option v-for="item in proviences" :key="item.srId" :value="item.srId" :label="item.name">					
					</el-option>
				</el-select>
			</FormItem>
			<FormItem class="w-50" label="市*">
				<el-select v-model="house.cityId" @change="searchRegin(house.cityId)"
				clearable placeholder="请选择市*" size="small"
					style="width: 200px;margin-right: 20px;">
					<el-option v-for="item in citys" :key="item.srId" :value="item.srId" :label="item.name">					
					</el-option>
				</el-select>
			</FormItem>
			<FormItem class="w-50" label="区*">
				<el-select v-model="house.reignId"  clearable placeholder="请选择区*" size="small"
					style="width: 200px;margin-right: 20px;">
					<el-option v-for="item in regins" :key="item.srId" :value="item.srId" :label="item.name">					
					</el-option>
				</el-select>
			</FormItem>
			<FormItem class="w-50" label="小区">
				<Input v-model="house.xiaoqu" placeholder="请输入小区"></Input>
			</FormItem>
			<FormItem class="w-50" label="片区">
				<Input v-model="house.pianqu" placeholder="请输入片区"></Input>
			</FormItem>
			<FormItem class="w-50" label="楼层">
				<Select v-model="house.louceng" style="width:150px">
				        <Option  v-for="item in floors" :key="item.value" :value="item.value">{{ item.label }}</Option>
				</Select>
			</FormItem>
			<FormItem class="w-50" label="装修">
				<Select v-model="house.zhuangxiu" style="width:150px">
				        <Option  v-for="item in repairs" :key="item.value" :value="item.value">{{ item.label }}</Option>
				</Select>
			</FormItem>
			<FormItem class="w-50" label="朝向">
				<Select v-model="house.chaoxiang" style="width:150px">
				        <Option  v-for="item in faces" :key="item.value" :value="item.value">{{ item.label }}</Option>
				</Select>
			</FormItem>
			<FormItem class="w-50" label="电梯">
				<Select v-model="house.dianti" style="width:150px">
				        <Option  v-for="item in lifts" :key="item.value" :value="item.value">{{ item.label }}</Option>
				</Select>
			</FormItem>
			<!-- <FormItem class="w-50" label="详细地址*">
				<Input v-model="house.detailLocation" placeholder="请输入详细地址"></Input>
			</FormItem> -->
			<FormItem class="w-50" label="面积*">
				<Input v-model="house.area" placeholder="请输入面积"></Input>
			</FormItem>
			
			<FormItem class="w-50" label="户型室*">
				<Input v-model="house.roomCount" placeholder="请输入室"></Input>
			</FormItem>
			<FormItem class="w-50" label="年代">
				<Input v-model="house.niandai" placeholder="请输入年代"></Input>
			</FormItem>
			<FormItem class="w-50" label="产权类型*">
				<el-select v-model="propertType" clearable placeholder="请选择产权类型" size="small"
					style="width: 200px;margin-right: 20px;">
					<el-option v-for="item in propertTypes" :key="item.propertType" :label="item.label"
						:value="item.propertType">
					</el-option>
				</el-select>
			</FormItem>
			<FormItem class="w-50" label="房子总价*">
				<Input v-model="house.totalPrice" placeholder="请输入总价"></Input>
			</FormItem>
			<FormItem class="w-50" label="发布人">
				<Input v-model="house.personName" placeholder="请输入发布人"></Input>
			</FormItem>
			<FormItem class="w-50" label="联系电话">
				<Input v-model="house.tel" placeholder="请输入联系电话"></Input>
			</FormItem>
			<FormItem class="w-50" label="联系微信">
				<Input v-model="house.wxNumber" placeholder="请输入联系微信"></Input>
			</FormItem>
			<FormItem class="w-50" label="封面图片上传">
				<div v-if="house.imgUrl != ''">
				  <img
				    :src="house.imgUrl"
				    style="width:180px;height:120px"
				  />
				  <div class="demo-upload-list-cover">
				    <Icon
				      type="ios-trash-outline"
				      @click.native="handleRemove"
				    ></Icon>
				  </div>
				</div>
				<Upload
				  with-credentials
				  :max-size="2048"
				  :show-upload-list="false"
				  name="file"
				  ref="upload"
				  :format="['jpg', 'jpeg', 'png']"
				  :data="{ module: 'car', date: new Date() }"
				  :on-format-error="handleFormatError"
				  :on-exceeded-size="handleMaxSize"
				  :on-success="handleSuccess"
				  :action="url"
				>
				  <Button icon="ios-cloud-upload-outline" style="margin-top: 5px"
				    >Upload files</Button
				  >
				</Upload>
				
			</FormItem>
			
			
			<FormItem class="text-right">
				<Button @click="submit" type="primary">提交</Button>
				<Button @click="cancel" class="ml-2">取消</Button>
			</FormItem>
		</Form>
	</Layout>
</template>
<script>
	export default {
		data() {
			return {
				iport:'',
				url:'',
				proviences : [],
				citys : [],
				regins : [],
				propertType: null,
				house: {
					area: "",
					roomCount: "",
					provienceId: "",
					cityId: "",
					reignId: "",
					imgUrl: "",
					xiaoqu:'',
					painqu:'',
					zhuangxiu:'',
					chaoxiang:'',
					louceng:'',
					duanti:'',
					niandai:'',
					totalPrice:'',
					personName:'',
					tel:'',
					wxNumber:'',
					detailLocation: ""					
				},
				houseSell: {
					unitPrice: "",
					totalPrice: "",
					propertYear: "",
					clientId: 0,
					ct: "",
					ut: ""
				},
				roomCounts:[
						{value:1,label:'一室'},
						{value:2,label:'二室'},
						{value:3,label:'三室'},
						{value:4,label:'四室'},
						{value:5,label:'五室以上'},
						{value:6,label:'上跃'},
						{value:7,label:'下跃'},
						{value:8,label:'别墅'}
					],
					floors:[
						{value:'高',label:'高'},
						{value:'中',label:'中'},
						{value:'低',label:'低'},
						{value:'多层',label:'多层'},
						{value:'小高层',label:'小高层'},
						{value:'高层',label:'高层'},
					],
					faces:[
						{value:'南北',label:'南北'},
						{value:'东西',label:'东西'},
						{value:'其他',label:'其他'}
					],
					repairs:[
						{value:'清水',label:'清水'},
						{value:'简装',label:'简装'},
						{value:'精装',label:'精装'},
						{value:'豪装',label:'豪装'}
					],
					lifts:[
						{value:0,label:'有'},
						{value:1,label:'无'}
					],
				propertTypes: [{
						propertType: 1,
						label: '军产'
					},
					{
						propertType: 2,
						label: '国产'
					},
					{
						propertType: 3,
						label: '地产'
					},
					{
						value: 4,
						label: '公寓'
					},
					{
						value: 5,
						label: '公建'
					},
					{
						value: 6,
						label: '商铺'
					},
				],
			}
		},
		
		methods: {
			//图片上传时文件格式错误方法
			handleFormatError(file) {
			  this.$Notice.warning({
			    title: '文件格式不正确',
			    desc:
			      '文件 ' +
			      file.name +
			      ' 格式不正确，请上传 jpg 或 png 或 jpeg格式的图片。',
			  })
			},
			//校验图片的大小，不能大于2M
			handleMaxSize: function(file) {
			  this.$Modal.info({
			    title: '超出文件大小限制',
			    content: '文件 ' + file.name + ' 太大，不能超过 2M。',
			  })
			},
			handleRemove(file) {
			  // 从 upload 实例删除数据 
			  this.$data.house.imgUrl = ''
			},
			//上传成功后的勾子 
			handleSuccess: function(response, file, fileList) {
				
			  this.$data.house.imgUrl = response.DATA.URL
			  console.log( this.$data.house.imgUrl)
			},
			searchRegin : function(srId){
				let self = this
				this.http.get({
					url : "sys-region/list",
					param : {
						parentId : srId
					}
				}).then(data => {
					self.$data.regins = data;
				})
			},
			searchCity : function(srId){
				let self = this
				this.http.get({
					url : "/sys-region/list",
					param : {
						parentId : srId
					}
				}).then(data => {
					self.$data.citys = data
				});
			},
			searchProvience : function(){
				let self = this
				this.http.get({
					url : "/sys-region/list",
					param : {
						parentId : 0
					}
				}).then(data => {
					self.$data.proviences = data;
				});
			},
			submit: function() {

				if (this.$data.house.des === null) {
					this.message.error("房子描述必须输入");
					return;
				}
				if (this.$data.house.area === null) {
					this.message.error("面积必须输入");
					return;
				}
				if (this.$data.house.provienceId === null) {
					this.message.error("省份必须输入");
					return;
				}
				if (this.$data.house.roomCount === null) {
					this.message.error("室必须输入");
					return;
				}
				if (this.$data.house.hallCount === null) {
					this.message.error("厅必须输入");
					return;
				}
				if (this.$data.house.cityId === null) {
					this.message.error("市必须输入");
					return;
				}
				if (this.$data.house.reignId === null) {
					this.message.error("区必须输入");
					return;
				}
				if (this.$data.house.totalPrice === null) {
					this.message.error("总价必须输入必须输入");
					return;
				}
				let self = this;
				this.http.post({
					url: "house-sell/info",
					param: {
						des: this.$data.house.des,
						area: this.$data.house.area,
						hallCount: this.$data.house.hallCount,
						roomCount: this.$data.house.roomCount,
						provienceId: this.$data.house.provienceId,
						cityId: this.$data.house.cityId,
						reignId: this.$data.house.reignId,
						imgUrl: this.$data.house.imgUrl,
						detailLocation: this.$data.house.detailLocation,
						totalPrice: this.$data.house.totalPrice,
						propertType: this.$data.house.propertType,
						clientId: this.$data.house.clientId,
						ct: this.$data.house.ct,
						ut: this.$data.house.ut,
						clientId: 1001
					}
				}).then(data => {
					self.message.info("新增成功");					
					this.$tabs.close();
					this.$router.push({
						name: "houseSell"
					})
				});
			},
			cancel: function() {
				this.$tabs.close();
			}
		},
		created: function() {
			this.iport = this.store.state.iport
			this.url = this.iport + 'image/upload'
			this.searchProvience();
			var cli = this.local.session.getItem("CURRENT");
			this.house.clientId = cli.client.clientId;
			
		},
	}
</script>

<style>
</style>
